<style scoped>
.limit {
  color: #cfcfcf;
  margin: 0 8px;
}
/deep/.el-menu-item.is-active {
  color: #757993 !important;
  background-color: #fff !important;
}
/deep/.el-menu-item {
  color: #8a8989 !important;
}
/deep/ .el-menu-item i {
  color: #8a8989;
}
.el-menu.el-menu--horizontal {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.notice {
  width: 89%;
  float: left;
  text-align: right;
  position: absolute;
}
.notice img {
  width: 1.35%;
  margin-top: 0.2rem;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
#head {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 146px;
  margin-right: 2%;
}
.headImg {
  display: inline-block;
  width: 20%;
  height: 20%;
  margin-left: 5%;
}
/* 用户名称样式 */
.user_name_c {
  padding: 0 0 0 5px;
  min-width: 45px;
  color: #8a8989;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.submenu {
  width: 100px;
  background-color: #fff;
}
/deep/ .el-submenu__title {
  max-width: 40px;
  padding-right: 0;
  padding-left: 35px;
  font-size: 14px;
  color: #8a8989 !important;
}
.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
}
#set {
  background-color: #fff;
  border: 1px solid #fff;
}
/deep/ .el-submenu__title:hover {
  background-color: #fff;
}
.el-menu.el-menu--horizontal {
  border: 0 solid #fff;
}
/deep/ .el-submenu__title {
  height: 29px;
  line-height: 29px;
}
</style>
<template>
  <div class="body_all">
    <div class="ba_top">
      <div style="float: left">
        <el-date-picker
          v-model="searchList.startTime"
          align="right"
          type="date"
          placeholder="开始时间"
          :picker-options="pickerOptions"
          size="mini"
        >
        </el-date-picker>
        <span class="limit">-</span>
        <el-date-picker
          v-model="searchList.endTime"
          align="right"
          type="date"
          placeholder="结束时间"
          :picker-options="pickerOptions"
          size="mini"
        >
        </el-date-picker>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
      <div style="float: right;display:none;">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          text-color="#ccc"
          active-text-color="#f00"
        >
          <div id="head">
            <img src="../../assets/img/head.png" alt="" class="headImg" />
            <div class="user_name_c">
              <span>臧三</span>
            </div>
            <el-submenu index="1" class="submenu" collapse-transition="true">
              <div id="set">
                <el-menu-item @click="exit()" index="1-1" class="centers">
                  <i class="el-icon-right"></i>退出
                </el-menu-item>
                <el-menu-item @click="system()" index="1-2" class="centers">
                  <i class="el-icon-setting"></i>{{sysName}}
                </el-menu-item>
              </div>
            </el-submenu>
          </div>
        </el-menu>
      </div>
    </div>
    <div class="ba_main">
      <h4>工作台</h4>
      <!-- 工作台内容 -->
      <div class="workbench">
        <!-- 左侧工作台 -->
        <div class="work">
          <div class="wlTop">
            <span class="wTitle">今日跟进任务对比</span>
            <div class="tasksNumber">
              <div class="record">
                <span>跟进任务总数</span>
                <span>10</span>
              </div>
              <div class="record">
                <span>跟进任务总数</span>
                <span>10</span>
              </div>
            </div>
          </div>
          <!-- 1/2 -->
          <div class="wlBot">
            <div class="customerD">
              <span class="wTitle">未联系客户</span>
              <!-- 客户数据 -->
              <div class="customerData">
                <div class="cdCantent">
                  <table>
                    <tr>
                      <td rowspan="3" class="tabImg">
                        <img src="../../assets/img/head.png" alt="" />
                      </td>
                      <td class="userName">
                        赵总<span class="source" :style="{ color: '#2AAE67' }"
                          >@微信</span
                        >
                      </td>
                      <td class="cdPhone">
                        <i class="icon iconfont icon-31dianhua"></i>18358758745
                      </td>
                    </tr>
                    <tr>
                      <td class="grTitle">所属公司</td>
                      <td>济南华誉涂装设备设备有限公司</td>
                    </tr>
                    <tr>
                      <td class="grTitle">地址</td>
                      <td>山东省济南市章丘区</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div class="customerD">
              <span class="wTitle">重点客户</span>
              <!-- 客户数据 -->
              <div class="customerData">
                <div class="cdCantent">
                  <table>
                    <tr>
                      <td rowspan="3" class="tabImg">
                        <img src="../../assets/img/head.png" alt="" />
                      </td>
                      <td class="userName">
                        赵总<span class="source" :style="{ color: '#2AAE67' }"
                          >@微信</span
                        >
                      </td>
                      <td class="cdPhone">
                        <i class="iconfont icon-31dianhua"></i>18358758745
                      </td>
                    </tr>
                    <tr>
                      <td class="grTitle">所属公司</td>
                      <td>济南华誉涂装设备设备有限公司</td>
                    </tr>
                    <tr>
                      <td class="grTitle">地址</td>
                      <td>山东省济南市章丘区</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧工作台 -->
        <div class="work">
          <div class="wlTop">
            <span class="wTitle">目标业绩对比度</span>
            <div class="tasksNumber">
              <div class="record">
                <span>跟进任务总数</span>
                <span :style="{ color: '#FF0000' }">10000000.00</span>
              </div>
              <div class="record">
                <span>跟进任务总数</span>
                <span>5000000.00</span>
              </div>
            </div>
          </div>
          <!-- 1/2 -->
          <div class="wlBot">
            <div class="customerD">
              <span class="wTitle">新增好友数</span>
              <!-- 无数据状态 -->
              <div class="nullDataView">
                <img src="../../assets/img/nullData.png" alt="" />
                暂无数据
              </div>
            </div>
            <div class="customerD">
              <span class="wTitle">非好友新增数</span>
              <!-- 无数据状态 -->
              <div class="nullDataView">
                <img src="../../assets/img/nullData.png" alt="" />
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
export default {
  data() {
    return {
      loading: false,
      sysName: "",
      // 搜索条件
      searchList: {
        startTime: "",
        endTime: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  created() {
    if (this.$store.state.systemLayer == "front") {
      this.sysName = "后台管理系统";
      document.title = "群思SCRM-PC"
    } else {
      this.sysName = "前台管理系统";
      document.title = "群思SCRM-后台"
    }
  },
  methods: {
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
    },
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
          var storage = window.localStorage;
          storage.clear();
          setTimeout(() => {
            this.$store.commit("logout", "false");
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 切换系统
    system() {
      if (this.$store.state.systemLayer == "front") {
        this.$store.commit("setSystemLayer", "Administration");
      } else {
        this.$store.commit("setSystemLayer", "front");
      }
      this.$router.go(0);
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/workbenchC/statisticsC.css";
</style>